import React from 'react';
import { Radio } from 'antd';
import { FieldNodeSchema } from '@/app/codeTreeSlice';
import singleBg from '@/assets/images/ic_bg_assembly.svg';
import moreIcon from '@/assets/images/icon_arrow_right_m.svg';
import styles from '../index.less';

interface RenderUsageTrendsProd2Props {
  focusComponent: FieldNodeSchema | undefined;
  handleChange: (value: any, key: string) => void;
}

const THEME_CONFIGS = {
  white: {
    bgColor: '#FFFFFF',
    bgColorOpacity: 100,
    titleColor: '#242424',
    titleColorOpacity: 100,
    titleFontSize: '16',
    moreColor: '#6A52E8',
    moreFontSize: '14',
    selectedTabColor: '#6A52E8',
    chartTheme: 'White',
    chartLineColor: '#6A52E8',
    chartLineColorOpacity: 100,
    chartAreaColor: 'rgba(106, 82, 232, 0.1)',
    chartAreaColorOpacity: 10,
    tooltipBackgroundColor: 'rgba(0, 0, 0, 0.8)',
    tooltipBackgroundColorOpacity: 80,
    tooltipTextColor: '#FFFFFF',
    gridLineColor: '#D9D9D9',
    gridLineColorOpacity: 100,
    staticTitleFontColor: '#545454',
    staticTitleFontColorOpacity: 100,
    staticTitleFontSize: '14',
    labelColor: '#545454',
    labelColorOpacity: 100,
    titleIcon: [{ src: singleBg, width: 0, height: 0, iconName: '', link: '', linkId: '', linkType: '' }],
    moreIcon: [{ src: moreIcon, width: 0, height: 0, iconName: '', link: '', linkId: '', linkType: '' }],
  },
  purple: {
    bgColor: '#3434E1',
    bgColorOpacity: 100,
    titleColor: '#FFFFFF',
    titleColorOpacity: 100,
    titleFontSize: '18',
    moreColor: '#FFFFFF',
    moreFontSize: '14',
    selectedTabColor: '#07D39F',
    chartTheme: 'Black',
    chartLineColor: '#07D39F',
    chartLineColorOpacity: 100,
    chartAreaColor: 'rgba(7, 211, 159, 0.2)',
    chartAreaColorOpacity: 20,
    tooltipBackgroundColor: 'rgba(255, 255, 255, 0.9)',
    tooltipBackgroundColorOpacity: 90,
    tooltipTextColor: '#242424',
    gridLineColor: '#D9D9D9',
    gridLineColorOpacity: 100,
    staticTitleFontColor: '#B5B5B5',
    staticTitleFontColorOpacity: 100,
    staticTitleFontSize: '14',
    labelColor: '#B5B5B5',
    labelColorOpacity: 100,
    titleIcon: [{ src: singleBg, width: 0, height: 0, iconName: '', link: '', linkId: '', linkType: '' }],
    moreIcon: [{ src: moreIcon, width: 0, height: 0, iconName: '', link: '', linkId: '', linkType: '' }],
  },
};

export default function RenderUsageTrendsProd2({
  focusComponent,
  handleChange,
}: RenderUsageTrendsProd2Props) {
  const applyTheme = (themeKey: 'white' | 'purple') => {
    const theme = THEME_CONFIGS[themeKey];
    handleChange(themeKey, 'quickTemplate');

    Object.entries(theme).forEach(([key, value]) => {
      handleChange(value, key);
    });
  };

  return (
    <div className={styles.styleBox}>
      <div style={{ marginBottom: '12px', fontWeight: 'bold' }}>Quick Template</div>
      <Radio.Group
        value={focusComponent?.props.quickTemplate || 'white'}
        onChange={(e) => applyTheme(e.target.value)}
      >
        <Radio value="white">White Theme</Radio>
        <Radio value="purple">Purple Theme</Radio>
      </Radio.Group>
      <div style={{ marginTop: '8px', fontSize: '12px', color: '#999' }}>
        Apply preset theme styles (colors, icons, chart theme)
      </div>
    </div>
  );
}
